{% extends 'base.html' %}


{% block html_title %}
    Review Info
{% endblock %}

{% block cus_css %}
    <style>
        /* Make the badge float in the top right corner of the button */
        .ship_count_0 {
            background-color: #cc7456;
            border-radius: 1.5rem;
            color: white;

            padding: 1px 3px;
            font-size: 10px;

            position: absolute; /* Position the badge within the relatively positioned button */
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
        }

        .ship_count_1 {
            background-color: #debc6d;
            border-radius: 1.5rem;
            color: white;

            padding: 1px 3px;
            font-size: 10px;

            position: absolute; /* Position the badge within the relatively positioned button */
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
        }

        .ship_count_2 {
            background-color: #909128;
            border-radius: 1.5rem;
            color: white;

            padding: 1px 3px;
            font-size: 10px;

            position: absolute; /* Position the badge within the relatively positioned button */
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
        }

        .ship_count_3 {
            background-color: #97c440;
            border-radius: 1.5rem;
            color: white;

            padding: 1px 3px;
            font-size: 10px;

            position: absolute; /* Position the badge within the relatively positioned button */
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
        }

        .ship_count_o {
            background-color: #97c440;
            border-radius: 1.5rem;
            color: white;

            padding: 1px 3px;
            font-size: 10px;

            position: absolute; /* Position the badge within the relatively positioned button */
            top: -10px;
            right: -10px;
            width: 20px;
            height: 20px;
        }
    </style>
{% endblock %}

{% block html_body_nav_ol %}

    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'review:index' %}">Review</a></li>
    <li class="breadcrumb-item active" aria-current="page">List</li>

{% endblock %}


{% block html_body %}

    <table class="table table-striped align-middle">
        <thead>
        <tr>
            <td colspan="5"></td>
            <td>
                <a class="btn btn-info" href="{% url 'review:create-presetting' %}"
                   role="button">New</a>
            </td>
        </tr>
        <tr>
            <th scope="col">#</th>
            <th scope="col">ID</th>
            <th scope="col" class="d-none d-sm-none d-md-block">Summary</th>
            <th scope="col">Repository</th>
            <th scope="col">Branch</th>
            <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>

        {% for review in review_list %}
            <tr>
                <th> {{ forloop.counter }} </th>
                <td>
                    <div>
                        <a href="{{ review.review_abs_url }}" target="_blank">{{ review.review_id }}
                        </a>
                    </div>
                </td>
                <td class="d-none d-sm-none d-md-block"> {{ review.review_summary }} </td>
                <td> {{ review.review_profile.review_repository }} </td>
                <td> {{ review.review_branch }} </td>
                <td style="width: 200px !important;">
                    <div class="row flex-nowrap justify-content-end">
                        <div class="col-6 pr-0 ">
                            <a class="w-75 btn btn-info p-0" href="{% url 'review:update' pk=review.id %}"
                               role="button">Update</a>
                        </div>
                        <div class="col-6 pl-0 ">
                            <a class="w-75 btn btn-success p-0  {% if review.ship_it_count <= 0 %}disabled {% endif %} " style="position: relative !important;"
                               href="{% url 'review:push' pk=review.id %}"
                               role="button">
                                {% if review.ship_it_count <= 0 %}
                                    <span class="ship_count_0">{{ review.ship_it_count }}</span>
                                {% elif review.ship_it_count <= 1 %}
                                    <span class="ship_count_1">{{ review.ship_it_count }}</span>
                                {% elif review.ship_it_count <= 2 %}
                                    <span class="ship_count_2">{{ review.ship_it_count }}</span>
                                {% elif review.ship_it_count <= 3 %}
                                    <span class="ship_count_3">{{ review.ship_it_count }}</span>
                                {% else %}
                                    <span class="ship_count_o">{{ review.ship_it_count }}</span>
                                {% endif %}
                                Push</a>

                        </div>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>

    </table>

    <div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
    </div>

{% endblock %}
